<template>
	<div class="t-main">
		<div class="v-tools" v-show="currBuild?.build">
			<div class="btn-secene">
				<div class="sbtn" v-for="im in iMenus" :title="im.name" :class="{ 'act': iMAct?.id == im.id }"
					v-show="im.visible" @click="im.call(im)">
					<img :src="im.icon" />
					<div v-if="im.rg != null" class="rg">
						<input class="irg" type="range" :min="0" :max="100" v-model="im.rg" @input="im.call(im)" />
					</div>
				</div>
			</div>
			<div class="btn-flo-box fbg" v-show="showFlosBtn.length > 0 && toggBtns">
				<div class="f-prev fbtn " @click="hSetFloPage(-1)"> </div>
				<div class="btn-flos">
					<div v-for="(item, i) in showFlosBtn" class="bflo" :class="[item.act ? 'act' : '']"
						@click="hFloChange(item, i)">
						<span> {{ item.flo }}F </span>
					</div>
				</div>
				<div class="f-next fbtn" @click="hSetFloPage(1)"> </div>
			</div>
			<div class="btn-build fbg">
				<!-- <div class="f-prev fbtn" @click="hSetBuildIndex(-1)"> </div> -->
				<div class="f-prev fbtn" @click="toggBtns = !toggBtns" title="楼层列表"> </div>
				<div class="bname">
					堇心颐养中心
					<!-- {{ currBuild?.build }} -->
				</div>
				<!-- <div class="f-next fbtn" @click="hSetBuildIndex(1)"> </div> -->
			</div>
		</div>
		<!-- 漫游 -->
		<div class="roami">
			<man-you ref="refRo" @call="(h, d) => hCall(h, d)"></man-you>
		</div>
		<!-- 底部 -->
		<div class="tools-bottom">
			<el-set @call="hCall" v-show="showSet"></el-set>
			<div class="b-box">
				<div class="sbtn" v-for="im in iMenus2" :title="im.name" :class="{ 'act': iMAct?.id == im.id }"
					v-show="im.visible" @click="im.call(im)">
					<p style="position: absolute;top: -23px;">{{ im.name }}</p>
					<img :src="im.icon" />
					<div v-if="im.rg" class="rg">
						<input class="irg" type="range" min="0" max="100" v-model="im.rg" @input="im.call(im)" />
					</div>
				</div>
			</div>
		</div>
		<!-- 展示 -->
		<div class="tools-bottom zs" v-show="isZs">
			<div class="b-box">
				<div class="sbtn" style="margin: 0!important;" v-for="im in iMenusZS" :title="im.name"
					:class="{ 'act': im.act }" v-show="im.visible" @click="im.call(im)">
					<div v-if="im.rg" class="rg">
						<input class="irg" type="range" :min="0" :max="100" v-model="im.rg" @input="im.call(im)" />
					</div>
					<img :src="im.icon" />
					<p>{{ im.name }}</p>
				</div>
			</div>
		</div>
		<!-- 左侧 -->
		<div class="tools-bottom lft" v-show="false">
			<div class="b-box">
				<div class="sbtn" v-for="im in iMenusLt" :title="im.name" :class="{ 'act': iMAct?.id == im.id }"
					v-show="im.visible" @click="im.call(im)">
					<img :src="im.icon" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import {
	nextTick,
	onMounted,
	onUnmounted,
	ref,
	watch,
	toRefs,
	computed
} from "vue";
import manYou from "./roaming.vue";
import {
	useStore
} from "vuex";
const store = useStore();
const pages = computed(() => store.getters.pages);
import elSet from "./set.vue";
const {
	showNav,
	showAside,
	pgCurrent,
	isFullScene,
	query,
	test,
	showHead,
	asideWidth,
	arrAirStates,
	year,
	spaceComd,
	spaceComds,
} = toRefs(store.state);
const {
	pgShow,
} = toRefs(store.state)
const multilayer = ref(false) /*多层模式*/,
	_fspace = ref(0) /*楼层缩放*/,
	refRo = ref(null) /*漫游*/;
/**
 * @param {Object} name 名称
 * @param {Object} icon 图标
 * @param {Object} ev  回调
 * @param {Object} v  显示隐藏
 * @param {Object} rg  滑块事件
 */
function iMenu(name, icon, ev, v, rg) {
	return {
		id: new Date().getTime() + Math.random().toString(32).slice(2, 10),
		name: name,
		act: false,
		icon: icon ? `./imgs/stool/${icon}.png` : 'err.png',
		call: e => {
			if (e.rg == null) {
				iMAct.value = e;
			}
			ev?.(e);
		},
		rg: rg == null ? null : rg,
		visible: v == null ? true : v,
	}
}
const toggBtns = ref(false);
var def = 0,
	isHidWall = false,
	zb = 0;
const floPage = ref(-1),
	isAll = ref(true),
	is2d = ref(false),
	iMAct = ref(null) /**/,
	sFBC = 7,
	isZs = ref(false),
	showMa = true,
	showMap = ref(false);
//顶部菜单
const iMenus = [
	// iMenu("周边", 'zb', (e) => {
	// 	////周边1 1=正常全显示2=隐藏除当前建筑以外的建筑 3= 隐藏当前建筑以外的所有对象				
	// 	//hCall("SetPeiLouState", true+"");
	// 	let x = zb % 3 + 1;
	// 	zb++;
	// 	hCall("SetSceneState", x);
	// }, showMa),
	iMenu("整栋", 'zd', e => hAll()),
	iMenu("单层/多层", 'dc', e => {
		multilayer.value = !multilayer.value;
		e.enable = multilayer.value;
	}, false),
	iMenu("透视", 'ts', (e) => {
		console.log("透视", e.rg);
		//透视
		hCallScene("SetOpacity", Number(e.rg).toFixed(1));
	}, true, 0),
	iMenu("墙体", 'qt', e => {
		isHidWall = !isHidWall;
		e.enable = isHidWall;
		//-1.墙体隐藏
		hCallScene("SetWallVisible", !isHidWall + "");
	}),
	// iMenu("平铺", 'pp', e => {
	// 	e.enable = !e.enable;
	// 	hCall("SetSceneFloPT", e.enable + "");
	// }, showMa),
	// iMenu("抽屉", 'ct', e => {
	// 	e.enable = !e.enable;
	// 	//console.log("抽屉", e.enable);
	// 	hCall("SetCamFlat", e.enable + "");
	// }, showMa),
	iMenu("拉伸", 'ls', (e) => {
		//console.log("拉伸", e.rg);
		hCallScene("SetFloorSpace", e.rg * .1);
	}, true, 0)
];

//底部菜单
const iMenus2 = [
	iMenu("总览", 'zl', (e) => hGoHome()),
	iMenu("全屏", 'qp', (e) => {
		e.enable = !e.enable;
		showAside.value = !showAside.value;
		// pgShow.value = !pgShow.value
	}),
	// iMenu("地图", 'dt', (e) => {
	// 	showMap.value = !showMap.value;
	// }, showMa),
	iMenu("展示", 'zs', (e) => {
		isZs.value = !isZs.value;
	}),
	iMenu("配置", 'pz', (e) => {
		iMAct.value = null;
		e.enable = !e.enable;
		showSet.value = e.enable;
	}, showMa),
];
const showSet = ref(false);

///展示菜单
const hCallScene = (h, d, b) => {
	hCall("CallScene", {
		h: h,
		dat: d
	}, b);
}
const actZs = ref(),
	iMenusZS = [
		iMenu("透视", 'ts2', (e) => {
			hCallScene("SetOpacity", e.rg);
		}, true, 1),
		iMenu("飞行", 'fx', (e) => { }, false),
		iMenu("标签", 'bq', (e) => {
			e.act = !e.act;
			hToggle2d();
		}),
		iMenu("绿化", 'lh', (e) => {
			hCall("SetTerrain", e.enable + "");
			e.enable = !e.enable;
			e.act = e.enable;
		}, showMa),
		// iMenu("2D/3D", '2d', (e) => {
		// 	e.enable = !e.enable;
		// 	hCall("SetCamFlat", e.enable + "");
		// }, showMa),
		iMenu("漫游", 'my', (e) => {
			//e.enable = !e.enable;
			hSetRo(true);
			isZs.value = false;
		}),
	];

//左侧菜单
const iMenusLt = [
	iMenu("框选", 'kx', (e) => { }),
	iMenu("点选", 'dx', (e) => { }, showMa),
	iMenu("线选", 'xx', (e) => { }, showMa),
	iMenu("事件点", 'sjd', (e) => { }, showMa),
];


// 标签 图标显示
const hToggle2d = () => {
	is2d.value = !is2d.value;
	hCall("hToggle2d");
};


//显示楼层翻页
// const hSetFloPage = i => {
// 	let pg = floPage.value + i;
// 	console.log("pg", pg);
// 	console.log("currBuild", currBuild.value);
// 	if (pg < 0) { //第一页			
// 		pg = 0;
// 	}
// 	else if (pg + sFBC >= currBuild.value.flos.length) { //最后一页		
// 		console.log("最后一页");

// 		return;
// 	}
// 	floPage.value = pg;
// };
// watch(floPage, ix => {
// 	console.log("ix", ix);
// 	console.log("floPage发生变化", floPage.value);
// 	if (!currBuild.value) {
// 		return;
// 	}
// 	let flos = currBuild.value.flos;
// 	console.log("flos", flos);
// 	if (ix < 0 || ix + sFBC >= flos.length) {
// 		return;
// 	}
// 	showFlosBtn.value = flos.slice(ix, ix + sFBC);
// 	console.log("showFlosBtn.value ", showFlosBtn.value);
// });

const hSetFloPage = i => {
	if (!currBuild.value) return;
	const total = currBuild.value.flos.length;
	// 计算最大页码（从0开始计数的页码）
	const maxPage = Math.max(0, total - sFBC); // 注意：如果total-sFBC为负数，则取0
	let pg = floPage.value + i;
	if (pg < 0) {
		pg = 0;
	} else if (pg > maxPage) {
		pg = maxPage;
	}
	floPage.value = pg;
};
watch(floPage, ix => {
	if (!currBuild.value) {
		return;
	}
	let flos = currBuild.value.flos;
	// 直接截取，即使最后一页不足sFBC个，slice也会自动截取到数组末尾
	showFlosBtn.value = flos.slice(ix, ix + sFBC);
});

var isUi = false;
//切换活动楼层
const hFloChange = (flo, i) => {
	console.log("切换活动楼层");
	isUi = true;
	//选择靠边时自动翻页
	if (i == sFBC - 1) {
		hSetFloPage(1);
	} else if (i == 0) {
		hSetFloPage(-1);
	}
	var flos = currBuild.value.flos;
	if (!multilayer.value) {
		//单选
		for (var i = 0; i < flos.length; i++) {
			if (flos[i].flo != flo.flo) {
				flos[i].act = false;
			}
		}
		flo.act = true;
	} else {
		//多选
		flo.act = !flo.act;
	}
	var acts = flos.filter((t) => t.act);
	hOnChanged(flos);
};

//整栋
const hAll = () => {
	var flos = currBuild.value.flos;
	for (var i = 0; i < flos.length; i++) {
		flos[i].act = true;
	}
	hOnChanged(flos);
	hCallModuleScene("SetWallVisible", "true");
	hCallModuleScene("SetFloorSpace", "0")
};

//主页
const hGoHome = () => {
	multilayer.value = false;
	isHidWall = false;
	currBuild.value = null;
	hCallModuleScene("SetCurrentBuild", "");
	showFlosBtn.value = [];
};
const hOnMap = b => {
	hCallModuleScene("SetCurrentBuild", b + "#");
}

const hOnChanged = (flos) => {
	//isUi = true;
	var acts = flos.filter((t) => t.act).map((t) => t.flo);
	// console.log("t楼层切换", acts);
	//如果选择楼层大于等于1展示1层填补
	// acts.forEach(item => {
	// 	if (item >=1) {
	// 	    acts.push(1);
	// 	}
	// }
	// )
	//如果选择楼层小于等于-1
	acts.forEach(item => {
		if (item <= -1) {
			hCallScene("SetBaseShow", false, "");
		} else {
			//确保-1层同时展示不会漏出空洞地面
			acts.push(-1);
			hCallScene("SetBaseShow", true, "");
		}
	}
	)
	hCallModuleScene("SetCurrentFloors", acts);
};

//----------------------3.楼层拉伸
const fMax = ref(10);
watch(_fspace, (fs) => {
	hCall("SetFloorSpace", fs);
});
const hFsMinMax = () => {
	if (_fspace.value == 0) {
		_fspace.value = fMax.value;
	} else {
		_fspace.value = 0;
	}
};
const hRefPage = () => {
	_fspace.value = 0;
	isHidWall = false;
};
const hSetActFlo = f => {

	//console.log("楼层切换", f);
	//{build:"",flo:0}
	if (isUi) {
		isUi = false;
		return;
	}

	let flos = currBuild.value.flos;
	let flo = flos?.filter(t => t.act) || [];
	//仅一层显示 且 楼层等于当前楼层
	if (flo.length == 1 && flo[0].flo == flo) {
		return;
	};

	let ix = 0;
	for (var i = 0; i < flos.length; i++) {
		let flo = flos[i];
		if (flo.flo == f) {
			flo.act = true;
			ix = i;
		} else {
			flo.act = false;
		}
	}

	//楼层居中显示 
	ix = ix > 3 ? ix - 3 : 0;
	if (ix == floPage.value) {
		return;
	}
	floPage.value = ix;
}

const datFlos = ref([]),
	showFlosBtn = ref([]); //显示的楼层按钮

const sceneBuilds = ref([]);

//属性定义
const props = defineProps({
	dat: {
		type: String,
	},
});

const hEmits = defineEmits(["onCall", "callUnity"]);
const hCall = (h, d, b) => {
	hEmits("onCall", h, d, b);
};

//模板化调用，场景模块
const hCallModuleScene = (h, d) => {
	hCall("CallScene", {
		h: h,
		dat: d
	});
}



//漫游
const hSetRo = e => {
	refRo.value.hBegin?.(e);
}

const currBuild = ref({});

const evScene = {
	hSetBuilds: bs => {
		//			console.log("建筑列表", bs);
		sceneBuilds.value = bs.map(t => {
			//楼层排序
			t.flos.sort((a, b) => a - b);
			t.flos = t.flos.map((f) => {
				return {
					act: true,
					flo: f,
				};
			})
			return t;
		});

	},
	OnActBuild: (d) => {
		//{build:"",flos:[]}
		//		console.log("楼宇切换", d);
		//关闭多选
		multilayer.value = false;

		if (d.build == currBuild.value?.build) {
			return;
		}

		let b = sceneBuilds.value.find(t => t.build == d.build);
		b.flos?.forEach(f => f.act = true);

		currBuild.value = b;

		floPage.value = -1;
		setTimeout(() => {
			floPage.value = 0;
		}, 10);

		if (isUi) {
			isUi = false;
			return;
		}
	},
	OnActFlo: (d) => {
		let flo = currBuild.value?.flos?.filter(t => t.act) || [];
		//仅一层显示 且 楼层等于当前楼层 且 楼宇等于当前楼宇
		if (flo.length == 1 && flo[0].flo == d.flo && d.build == currBuild.value.build) {
			return;
		};
		hSetActFlo(d.flo);
	},
	onCurrBuildPos: () => { },
}
const evs = {
	hSetFlos: flos => {
		flos.sort((a, b) => a - b);
		currBuild.value = {
			build: {},
			flos: flos.map((f) => {
				return {
					act: true,
					flo: f,
				};
			})
		};
		showFlosBtn.value = currBuild.value.flos;
		toggBtns.value = true;
	}
}
defineExpose({
	hSetFlos: (t) => { },
	hSetActFlo,
	evScene,
	hSetRo,
	callIn: evs
});
onUnmounted(() => { });

onMounted(() => {
	nextTick(() => {
		hRefPage();
	});
});
</script>

<style scoped lang="scss">
.menuBox {
	ul {
		display: flex;
	}

	li {
		width: 67px;
		height: 69px;
		margin: 0 21px;

		i {
			width: 35px;
			height: 35px;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
		}

		p {
			position: absolute;
			top: -25px;
		}
	}
}

.minimap {
	position: absolute;
	width: 1000px;
	height: 593px;
	bottom: -30px;
	transform: scale(0.7);
}


.roami {
	position: absolute;
	bottom: 60px;
	left: 50%;
	transform: translate(-50%, 0);
}


.fbg {
	color: #444e57;
	// background: linear-gradient(90deg, rgba(255, 255, 255, 0.3607843137), transparent 30px), linear-gradient(90deg, transparent calc(100% - 30px), rgba(255, 255, 255, 0.3607843137)), #316babf0;
	padding: 0 8px;
	border-radius: 8px;
	// box-shadow: 0 0 3px 1px #3468a2;
	height: 50px;
	display: flex;
	align-items: center;
	// margin: 3px;
}

.btn-flo-box {
	background-image: url(/imgs/floor/floorBg.png);
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-between;

	.btn-flos {
		width: calc(100% - 40px);
	}
}


.btn-build {
	background-image: url(/imgs/index/bNameBg.png);
	background-size: 100% 100%;
}


.f-prev,
.f-next {
	width: 20px;
	height: 18px;
	cursor: pointer;
}

.f-prev {
	background: linear-gradient(180deg, rgba(84, 145, 229, 0.75), rgba(146, 198, 225, 0.75));
	// background-image: url(/imgs/floor/right.png);
	background-position: 100% 100%;
	// background: linear-gradient(90deg, #fff, transparent 45%);
	-webkit-mask: linear-gradient(145deg, transparent 7px, #fff 0) top left,
		linear-gradient(35deg, transparent 7px, #fff 0) bottom left;
	-webkit-mask-size: 52% 52%;
	-webkit-mask-repeat: no-repeat;
}

.f-next {
	background: linear-gradient(180deg, rgba(84, 145, 229, 0.75), rgba(146, 198, 225, 0.75));
	// background-image: url(/imgs/floor/left.png);
	// background: linear-gradient(-90deg, #fff, transparent 45%);
	-webkit-mask: linear-gradient(-145deg, transparent 7px, #fff 0) top right,
		linear-gradient(-35deg, transparent 7px, #fff 0) bottom right;
	-webkit-mask-size: 52% 52%;
	-webkit-mask-repeat: no-repeat;
}


.fbtn:hover {
	transform: scale(1.1);
}

.btn-flos {
	width: 260px;
	white-space: nowrap;
	display: flex;
	flex-direction: row;
	height: 70%;
	justify-content: space-between;
	flex-wrap: nowrap;

	.bflo {
		transition: all 0.2s;
		font-size: 13px;
		text-align: center;
		color: #444e57;
		padding: 0 4px;
		cursor: pointer;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.bflo.act,
	.bflo:hover {
		color: #eee;
		// background: linear-gradient(180deg, #cfe7f5, #286eb9);
		// border-radius: 10px;
		// background: url(/imgs/stool/flo-btn.png);

		background-image: url(/imgs/floor/flo_bg.png);
		background-size: 100% 100%;
		// background-size: calc(100% + 5px) calc(100% + 5px);

		background-position: center;
		// font-weight: bold;
	}

}

.t-main {
	-ms-user-select: none;
	user-select: none;
	width: calc(100% - 20px);
	height: 100%;
	overflow: hidden;
	position: relative;
	pointer-events: none;

	>div {
		pointer-events: all;
	}

	.sbtn {
		cursor: pointer;
		position: relative;
	}

	.v-tools {
		margin-top: 80px;
		display: flex;
		font-family: "microsoft yahei";
		justify-content: center;
		flex-direction: row;

		.btn-secene {
			display: flex;

			.sbtn {
				margin-right: 5px;
				width: 45px;
				height: 45px;
				background-image: url(/imgs/floor/btn_bg.png);
				background-size: 100% 100%;
				margin-top: 2px;

				img {
					height: 30px;
					width: 30px;
					margin: 9px;
				}

				.rg {
					transform: rotate(90deg);
					display: none;
				}
			}

			.sbtn:hover,
			.sbtn.act {
				width: 48px;
				height: 48px;
				background-image: url(/imgs/floor/btn_bg.png);

				.rg {
					margin-top: 5px;
					display: block;
				}
			}
		}
	}


	.tools-bottom {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		display: flex;
		justify-content: center;

		.b-box {
			display: flex;

			.sbtn {
				width: 70px;
				height: 70px;
				margin: 0 15px;
				background-image: url(/imgs/stool/bg.png);
				background-size: 100% 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				flex-wrap: nowrap;
				// overflow: hidden;

				img {
					// filter: drop-shadow(46px 0 0 #eee);
					// margin-right: 90px;
					width: 30px;
					height: 30px;
				}
			}

			.sbtn:hover,
			.sbtn.act {
				background-image: url(/imgs/stool/Cbg.png);
				transform: scale(1.03);

				img {
					// filter: drop-shadow(46px 0 0 #219AF5);
					width: 35px;
					height: 35px;
				}

			}
		}
	}

	.tools-bottom.zs {
		height: 70px;
		bottom: 100px;
		font-family: "microsoft yahei";
		color: #6389CA;
		font-size: 14px;

		.sbtn {
			height: 100%;
		}

		.sbtn:hover,
		.sbtn.act {
			transform: none;
			// filter: drop-shadow(0px 0px 1px #000);

			.rg {
				display: block !important;
			}

			img {
				filter: unset;
			}
		}

		.b-box {
			background-image: url(/imgs/stool/xbg.png);
			background-size: 100% 100%;
			align-items: center;

			img {
				width: 30px;
				height: 30px;
				filter: unset;
				margin: 0;
				// filter: drop-shadow(46px 0 0 #eee) drop-shadow(1px 1px 0px #6389CA);
			}

			.sbtn {
				background: none;
				flex-direction: column;
				overflow: unset;

				p {
					margin: 0;
				}

			}
		}

		.rg {
			position: absolute;
			bottom: 100px;
			margin-left: -6px;
			display: none;
			transform: rotate(-90deg);
		}
	}

	.tools-bottom.lft {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		width: 50px;
		height: calc(100% - 20px);
		justify-content: flex-end;
		align-items: center;
		margin-left: 20px;
		margin-bottom: 20px;

		.b-box {
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			width: 50px;

			.sbtn {
				margin: 6px 0;
			}

			img {
				width: 30px;
				height: 30px;
				filter: drop-shadow(45px 2px 0 #eee) drop-shadow(1px 1px 0px #6389CA);
			}
		}
	}

}

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	margin: 3px 6px;
	height: 30px;
	width: 86px;
	transition: all 0.2s;
	font-size: 13px;
	flex-direction: row;
}

.btn.act,
.bg.act {
	background: rgba(242, 246, 255, 0.8);
	border: 1px solid #c0c0ca;
	border-radius: 5px;

	i {
		// filter: drop-shadow(calc(var(--st) * -6) 0px 0px #333639);
		// transform: scale(1.1);
	}
}

.bg:hover {
	background: rgba(179, 184, 190, 0.7);
	box-shadow: -1px 2px 1px #969ba0;
	color: #ffffff;

	i {
		filter: drop-shadow(calc(var(--st) * -6) 0px 0px #333639);
		transform: scale(1.1);
	}
}

.opt {
	display: none;
	position: absolute;
	right: 40px;
	width: 100px;
	top: 15px;
}

.optp:hover {
	.opt {
		display: block;
	}
}

.bg {
	overflow: hidden;
	background-color: #eee;
	// border-radius: 10px;

	i {
		background-image: url(/imgs/stool/40x_stool.png);
		background-size: calc(var(--st) * 6) calc(var(--st) * 3);
		width: var(--st);
		height: var(--st);
		display: block;
		transform: translateX(calc(var(--st) * 6));
		filter: drop-shadow(calc(var(--st) * -6) 0px 0px #333639);
	}

	i.b {
		background-position: calc(var(--st) * 0) calc(var(--st) * 0);
	}

	//多层
	i.multilayer {
		background-position: calc(var(--st) * -1) calc(var(--st) * 0);
	}

	//单层
	i.single {
		background-position: calc(var(--st) * -2) calc(var(--st) * 0);
	}

	//楼层拉伸
	i.fs {
		background-position: calc(var(--st) * -3) calc(var(--st) * 0);
	}



	//墙体
	//   i.wall {
	//     background-position: calc(var(--st) * -4) calc(var(--st) * 0);
	//   }

	//   i.home {
	//     background-position: calc(var(--st) * 0) calc(var(--st) * -1);
	//   }

	//   i.showBase {
	//     background-position: calc(var(--st) * -1) calc(var(--st) * -1);
	//   }

	//   i.tag2d {
	//     background-position: calc(var(--st) * -3) calc(var(--st) * -1);
	//   }
}


.drawInfo {
	pointer-events: all;
	user-select: none;
	position: absolute;
	right: 100%;
	bottom: 2px;
	width: 130px;
	color: #eee;

	p {
		color: #ffd862;
		margin: 6px 3px;
	}

	li {
		color: #a6a6a6;
	}

	ul {
		margin-top: 0;
		list-style: decimal;
		padding-top: 8px;
		padding-bottom: 8px;
		background-color: #17181ab4;
	}

	.act {
		color: #00c558;
		animation: fontloop 1.5s ease-in-out infinite;
	}
}

@keyframes fontloop {
	0% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(-10px);
	}

	100% {
		transform: translateX(0px);
	}
}

.wall {
	background-image: url(/imgs/stool/wall.png);
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
}

.wallHid {
	background-image: url(/imgs/stool/wallHid.png);
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
}

.home {
	background-image: url(/imgs/stool/home.png);
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
}

.home:hover {
	background-image: url(/imgs/stool/homeAct.png);
}

.homeAct {
	background-image: url(/imgs/stool/homeAct.png);
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
}

.showBase {
	background-image: url(/imgs/stool/showBase.png);
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
}

.i-trans {
	background-image: url(/imgs/stool/i-trans.png);
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
}

.hidBase {
	background-image: url(/imgs/stool/hidBase.png);
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
}

.showicon {
	background-image: url(/imgs/stool/showicon.png);
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
}

.hidIcon {
	background-image: url(/imgs/stool/hidIcon.png);
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
}

.bg.x.act {
	i::before {
		content: "";
		width: calc(100% - 4px);
		height: 2px;
		background-color: #eee;
		border: 1px solid #71a7ff;
		position: absolute;
		display: block;
		transform: rotate(45deg);
		top: calc(50% - 1px);
		left: 2px;
	}
}

.mod {
	background-color: #eee;
	color: #222;

	.ibox {
		transform: scale(0.8);
	}

	i {}
}

.ftool {
	height: 0px;
	transition: all 0.5s;
	overflow: hidden;
	color: #eee;

	.flo-box {
		height: calc(100% - 80px);
		overflow-y: auto;
		margin-right: 6px;
		padding-right: 10px;
	}

	.flos {
		background-image: url("/imgs/stool/flo-line.png");
		background-position: right bottom;
		background-repeat: repeat-y;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;


	}
}

.ftool.show {
	max-height: 330px;
	height: 330px;
}

.fsbox {
	.fsi {
		position: absolute;
		// transform: rotate(180deg);
		right: 10px;
		width: 190px;
		height: 40px;
		border: 1px solid #4c86e0;
		background-color: #eee;
		border-radius: 30px;
		line-height: 45px;
		top: 5px;
		display: none;
	}

	input {
		margin-left: 10px;
	}
}

.fsbox.act,
.fsbox:hover {
	.fsi {
		display: block;
	}
}

.bordc {
	width: 40px;
	height: 40px;
	background-color: #eee;
	// border: 1px solid #4c86e0;
	border-radius: 50%;
	transition: all 0.2s;
	position: relative;
}

.cc2 {
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-box {
	background-color: #eaeaeab0;
	border: 1px solid #bfc1c7;
	border-radius: 30px;
	width: 46px;
	min-height: 52px;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 20px;
}

.mphome {
	bottom: 10px;
	max-height: calc(100% - 20px);
	color: #222;

	>div {
		margin: 6px;
	}
}

.tol-right {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.fspace {
	position: relative;
}

.fspace input {
	transform: rotate(90deg);
	margin-top: 54px;
	width: 100px;
}
</style>